<template>
    <div class='dialog'>
        <div class='newAdd dialog-con updateStockText'>
                <div class="stockAdd">
                    <p>更新</p>
                </div>
            <div class="updateStockInfo">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品货号" prop="productCode" style=" margin:20px 0;">
                        <el-input v-model="modifydepotData.productCode" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="productSkuName" style=" margin:20px 0;">
                        <el-input v-model="modifydepotData.productSkuName" disabled></el-input>
                    </el-form-item>
                     <el-form-item label="商品数量" prop="productNum" style=" margin:20px 0;">
                        <el-input v-model="modifydepotData.productNum" onkeyup="value=value.replace(/^[^\d/-]+/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="残次品数量" prop="productNo" style=" margin:20px 0;">
                        <el-input v-model="modifydepotData.productNo" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" @change="verNum"></el-input>
                    </el-form-item>
                     <el-form-item label="选择仓库" prop="depotId">
                        <el-select v-model="modifydepotData.depotId" placeholder="请选择" style="width:300px;" disabled>
                            <el-option
                                v-for="item in depotData"
                                :key="item.id"
                                :label="item.depotName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="备注" prop="storage" style=" margin:20px 0;">
                        <el-input v-model="modifydepotData.storage"></el-input>
                    </el-form-item>
                    <el-form-item class="confirm">
                        <el-button type="primary" @click="submitForm('ruleForm')" style="margin:0 20px" size="medium">确定</el-button>
                        <el-button @click="cancelButton" size="medium">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
import regular from 'js/regular'
import {localStorage} from 'js/localStorage'
export default {
    inject:['reload'],
    data(){
        return{
            depotData:[],
            userId:'',
            ruleForm: {
                productCode:'',
                productSkuName:'',
                productNum:'',
                depotId:'',
                storeHouse:'',
                productNo:'',
                storage:''
            },
            rules:{
                // productName: [
                //     { required: true, message: '请输入商品名称', trigger: 'blur' },
                //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],
                // productCode: [
                //     { required: true, message: '请输入商品货号', trigger: 'change' }
                // ],
                // productNumber: [
                //     { required: true, message: '请输入商品数量', trigger: 'change' }
                // ],
                // depotId:[
                //     { required: true, message: '请选择仓库', trigger: 'change' }
                // ],
                // storeHouse:[
                //     { required: true, message: '请输入库位', trigger: 'change' }
                // ],
                // warning:[
                //     { required: true, message: '请输入预警库存', trigger: 'change' }
                // ]
            }
        }
    },
    props:{
        modifydepotData:{
            type:Object,
            default:{}
        }
    },
    created(){
        this.userId=localStorage.get("userID")
        this.getWareHouse()
    },
    methods:{
        verNum(val){
            if(this.modifydepotData.productNum<val){
               return this.$message.error("残次品数量不能大于商品数量")
            }
        },
        getWareHouse(){
          let success=data=>{
            if(data.code=="OK"){
              this.depotData=data.data;
            }else{
              this.$message.error(data.msg)
            }
          }
          this.api.erpComplainDepotListAll({},success)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
        //点击确定按钮，掉接口
        confirm(){
            let parmas={
               productSkuName:this.modifydepotData.productSkuName,
               productCode:this.modifydepotData.productCode,
               productNum:this.modifydepotData.productNum,
               productNo:this.modifydepotData.productNo,
               depotId:this.modifydepotData.depotId,
               storage:this.modifydepotData.storage,
               id:this.modifydepotData.id,
               userId:this.userId
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.$message.success('保存成功')
                    this.$emit('closeDialog')
                    this.reload()
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.depotStorageUpdate(parmas,success)
            
        },
        cancelButton(){
            this.$emit('closeDialog')
        },
    }
}
</script>
<style lang="scss" scoped>
.updateStockText{
    width:520px;
    height:500px;
    .stockAdd{
        width:520px;
        height:45px;
        background: #eee;
       p{
        font-size:18px;
        text-align: center;
        line-height: 45px;
         color:#606266;
       }
    }
    .updateStockInfo{
        .el-input{
            width:300px;
           
        }
    }
    .confirm{
        text-align:center;
        width:80%;
    }
}
</style>
